<template>
  <div>
  <h2>自定义指令</h2>
  <p v-color="c">hello world</p>
  <input type="text" v-focus>

  <hr>
  <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
export default{
  components:{MyTest},
  data(){
    return{
      c:'blue',
      uname:'lisisi'
    }
  },
  // 自定义指令
 directives:{
  // 指令：对象,对象里面可以写五个函数;每个函数都有固定的形参（el，obj）;el表示使用这个指令的元素，obj.value表示指令的值
 /*  指令：{
 bind(el，obj){},只会执行一次，可以在里面对元素进行样式的设置
 inserted(el，obj){},只会执行一次，可以在里面对元素进行行为操作，比如让元素获得焦点
 update(el，obj){},数据更新后，子组件的页面不一定更新，它会执行
 componentUpdated(el，obj){},数据更新后，包括子组件的数据、页面也会更新后，它会执行
 unbind(el，obj){}}，指令解绑的时候（组建销毁），它执行
  */
 //指令（el，obj）{}，这个函数写法，相当于bind和update方法

  color:{
    bind(el,obj){
      // console.log(el);
      // console.log(obj);
      el.style.color=obj.value
    },
    update(el,obj){
      el.style.color=obj.value
    }
  },

  // color(el,obj){
  //   el.style.color=obj.value
  // }

  focus:{
    inserted(el){
      el.focus()
    }
  }
 }
}
</script>